<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>根据地址查询经纬度</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=mVZr13att9WlzegHSidFUXz097GUqsOq"></script>
    <script src="../js/jquery-3.3.1.js"></script>
</head>
<body style="background:#f9f9f9; margin:0 auto">

<div style="width:1000px;margin:10px auto;">
    要查询的地址：<input id="address" type="text" placeholder="武汉" style="margin-auto:30px;"/>
    查询结果(经纬度)：<input id="coordinate" type="text" />
    <input type="button" value="查询" onclick="searchByStationName();"/>
    <input type="button" value="添加该坐标" onclick="addAddress()"/>
    <input type="button" value="显示已设置坐标" onclick="allAddress()"/>
    <div id="container"
         style="position:absolute; margin-top:30px; width:1000px; height:590px; top:20px; border:1px solid gray; overflow:hidden;"></div>
</div>

</body>

<script type="text/javascript">
    var map = new BMap.Map("container");
    map.centerAndZoom("武汉市", 12);
    map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

    map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
    map.addControl(new BMap.OverviewMapControl({isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));   //右下角，打开

    var localSearch = new BMap.LocalSearch(map);
    localSearch.enableAutoViewport(); //允许自动调节窗体大小
    function searchByStationName() {

        var keyword = document.getElementById("address").value;
        localSearch.setSearchCompleteCallback(function (searchResult) {
            var poi = searchResult.getPoi(0);
            // 获取坐标目的地坐标
            var point = poi.point.lng + "," + poi.point.lat;
            document.getElementById("coordinate").value = point;
            map.centerAndZoom(poi.point, 13);
            var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注，为要查询的地方对应的经纬度
            map.addOverlay(marker);
            var content = document.getElementById("text_").value + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;
            var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
            marker.addEventListener("click", function () {
                this.openInfoWindow(infoWindow);
            });
        });
        localSearch.search(keyword);
    }

    function addAddress() {
        var address = document.getElementById("address").value;
        var point = document.getElementById("coordinate").value;
        $.ajax({
            url: "/address/add.do",
            data:{"address":address,"point":point},
            type: "post",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success: function (data) {
                if (data.flag == true) {

                    window.location.href="map.html";
                }
                alert(data.message);
            }
        })

    }
    function allAddress(){
        // $.ajax({
        //     url: "/address/findAll.do",
        //     data:"",
        //     type: "post",
        //     contentType: "application/x-www-form-urlencoded; charset=utf-8",
        //     success: function (data) {
        //         jQuery.each(data.data, function(i,item){
        //             alert(item.id+","+item.name);
        //         });
        //     }
        // })
    }

</script>
</html>